<template>
  <div id="FM">
    <!-- 财务管理 -->
    <el-form :inline="true" :model="older" class="demo-form-inline">
      <!-- 姓名 -->
      <el-form-item label="老人姓名">
        <el-input v-model="older.name" placeholder="请输入咨询人姓名" clearable style="width: 149px; height: 40px" />
      </el-form-item>

      <!-- 入住号 -->
      <el-form-item label="入住号">
        <el-input v-model="older.Rid" placeholder="请输入入住号" clearable style="width: 164px; height: 40px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" color="rgba(86, 118, 247, 1)"
          style="width: 87px; height: 38px">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 第二行 -->
    <el-form :inline="true" :model="older" class="demo-form-inline">
      <el-form-item label="类型管理" class="BTN">
        <el-select v-model="older.region" placeholder="机构入住" clearable>
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>

        <el-button class="btn" type="primary" @click="router.push('/finanicialStatement')" color="rgba(86, 118, 247, 1)"
          style="width: 87px; height: 38px">财务账表</el-button>
      </el-form-item>
    </el-form>

    <div class="selection">
      <el-form :inline="true" :model="sel" class="demo-form-inline">
        <el-form-item label="楼号">
          <el-select v-model="sel.buildingRef" placeholder="楼号" clearable>
            <el-option label="一号楼" value="一号楼" default />
            <el-option label="二号楼" value="二号楼" />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="楼层">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="一楼" name="first">
              <span>房间:14个</span>
              <span>床位:19个</span>
              <span>共入住:15人</span>
              <span>0级照护:0人</span>
              <span>一级照护:2人</span>
              <span>二级照护:2人</span>
              <span>三级照护:2人</span>
              <span>四级照护:2人</span>
            </el-tab-pane>
            <el-tab-pane label="二楼" name="second">
              <span>房间:14个</span>
              <span>床位:19个</span>
              <span>共入住:15人</span>
              <span>0级照护:0人</span>
              <span>一级照护:3人</span>
              <span>二级照护:3人</span>
              <span>三级照护:3人</span>
              <span>四级照护:3人</span>
            </el-tab-pane>
            <el-tab-pane label="三楼" name="third">
              <span>房间:14个</span>
              <span>床位:19个</span>
              <span>共入住:15人</span>
              <span>0级照护:0人</span>
              <span>一级照护:4人</span>
              <span>二级照护:4人</span>
              <span>三级照护:4人</span>
              <span>四级照护:4人</span>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <br />
        <el-form-item>
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="空闲" value="空闲" />
            <el-checkbox label="已入住" value="已入住" />
            <el-checkbox label="请假外出" value="请假外出" />
            <el-checkbox label="外出就医" value="外出就医" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <!-- 信息卡片 -->
  <div>
    <el-card style="max-width: 100%" body-style="padding: 0" v-for="(item, index) in financelists" :key="index">
      <div style="display: flex">
        <div class="left">
          <div style="position: absolute; top: 18px; left: 10px; height: 24px">
            <el-icon color="white" size="24px">
              <School />
            </el-icon>
            <span style="color: white; font-size: 14px; line-height: 24px">{{ item.status }}</span>
          </div>
          <div style="position: absolute; top: 40px; right: 80px">
            <el-avatar :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
          </div>
          <div style="display: flex; color: white; position: relative">
            <div style="position: absolute; top: 130px; left: 30px">
              {{ item.name }}
            </div>
            <div style="position: absolute; top: 130px; left: 108px">{{ item.sex }}</div>
            <div style="position: absolute; top: 130px; left: 140px">{{ item.age }}岁</div>
          </div>
        </div>
        <div class="right">
          <!-- 顶部信息 -->
          <div class="topInfo">
            <span>今日体温</span>
            <span style="color: rgba(86, 118, 247, 1); margin-left: 10px">{{ item.body_temperature }}</span>
            <span style="margin-left: 156px">入住号:</span>
            <span class="text">{{ item.hospital_number }}</span>
            <span style="margin-left: 20px">照护等级:</span>
            <span class="text">{{ item.care_level }}</span>
            <span style="margin-left: 20px">床位号:</span>
            <span class="text">{{ item.bed_number }}5栋9楼02室 22床</span>
          </div>

          <!-- 底部信息 -->
          <div style="position: relative">
            <div class="leftInfo">
              <div style="">
                <div style="margin-bottom: 20px">医疗储备金:{{ item.medical_reserve_fund }}元</div>
                <div>
                  养老储备金:
                  <span style="color: red">{{ item.pension_reserve_fund }}元</span>
                </div>
              </div>

              <div style="
                  font-size: 14px;
                  text-align: end;
                  margin-left: 110px;
                  margin-right: 10px;
                ">
                <div style="color: rgba(154, 154, 154, 1)">10月账单已生成</div>
                <div style="color: red; margin-top: 10px">6月账单未结算</div>
              </div>
            </div>
            <div class="rightInfo">
              <el-button @click="handleFinanceRouter1(item)" style="
                  width: 87px;
                  height: 41px;
                  color: #5676f7;
                  border: 1px solid #5676f7;
                  font-size: 14px;
                ">充值/退费</el-button>
              <el-button style="
                  width: 87px;
                  height: 41px;
                  color: #5676f7;
                  border: 1px solid #5676f7;
                  font-size: 14px;
                " @click="this.$router.push('/settlementlist')">结算</el-button>
              <el-button @click="this.$router.push('/deduction')" style="
                  width: 87px;
                  height: 41px;
                  color: #5676f7;
                  border: 1px solid #5676f7;
                  font-size: 14px;
                ">扣费</el-button>
              <el-button @click="handleFinanceRouter(item)" style="
                  width: 87px;
                  height: 41px;
                  color: #5676f7;
                  border: 1px solid #5676f7;
                  font-size: 14px;
                ">账单明细</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>


<script setup>
import { reactive } from "vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Serive from '../../axios/index.js'
const activeName = ref("first");
const router = useRouter();
//人员列表
const financelists = ref([])
const checkList = ref(["空闲", "已入住", "请假外出", "外出就医"]);

const handleClick = (tab, event) => {
  console.log(tab, event);
};

onMounted(() => {
  financelist()
});

const financelist = async () => {
  const { data } = await Serive.get('/llfAPi/financeList')
  console.log();
  financelists.value = data.data
}

const handleFinanceRouter=(item)=>{
  const routerfinance=JSON.stringify(item)
  // console.log(routerfinance);
  router.push({path:'/billdetails',query:{routerfinance}})
}


const handleFinanceRouter1=(item)=>{
  const routerfinance=JSON.stringify(item)
  // console.log(routerfinance);
  router.push({path:'/finance_management/payment',query:{routerfinance}})
}


const older = reactive({
  name: "",
  Rid: "",
  region: "",
});

const sel = reactive({
  buildingRef: "一号楼",
  floor: "",
  region: "",
});



const onSubmit = () => {
  console.log("submit!");
};
</script>


<style scoped>
#FM {
  width: 85vw;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-button {
  border-radius: 15px;
}

.el-form-item .el-form-item__label {
  font-size: 16px;
}

.BTN {
  position: relative;
  width: 95%;
}

.btn {
  position: absolute;
  right: 0px;
}

.selection {
  /* border: 1px solid #000000; */
  /* border-radius: 15px; */
  width: 100%-200px;
  /* width: 100vw-200px; */
  min-height: 167px;
  background-color: rgba(232, 232, 232, 1);
  padding: 20px;
  box-sizing: border-box;
}

.demo-tabs span {
  margin-right: 40px;
  font-weight: bold;
  font-size: 14px;
}

.el-checkbox-group {
  margin-left: 45px;
}

.left {
  width: 220px;
  height: 180px;
  background-color: #5676f7;
  position: relative;
  /* border: 1px solid #000000; */
}

.topInfo {
  widows: 100%-220px;
  margin-left: 12px;
  margin-top: 18px;
  /* border: 1px solid #000000; */
}

.topInfo span {
  color: rgba(154, 154, 154, 1);
  font-size: 14px;
}

.topInfo .text {
  color: black;
  font-weight: bold;
  margin-left: 4px;
}

.leftInfo {
  height: 83px;
  position: absolute;
  left: 75px;
  top: 30px;
  /* border: 1px solid #000000; */
  border-right: 1px solid rgba(154, 154, 154, 1);
  font-size: 20px;
  display: flex;
}

.rightInfo {
  width: 600px;
  height: 83px;
  position: absolute;
  /* border: 1px solid #000000; */
  top: 30px;
  left: 480px;
  margin-top: 15px;
  margin-left: 20px;
}
</style>